<template>
  <h1 v-text="count" @click="increment"></h1>
  <h1 v-text="count" @click="addNum"></h1>
  <h1 v-text="count" @click="addCount"></h1>
  <h1 v-text="slogan"></h1>
  <button @click="changeGender(null)">红男绿女</button>
  <button @click="changeGender(1)">精神小伙儿</button>
  <button @click="changeGender(0)">扒蒜老妹儿</button>
  <table align="center">
    <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="person in persons">
      <td v-text="person.name"></td>
      <td v-text="person.gender === 1 ? '精神小伙儿':'扒蒜老妹儿'"></td>
    </tr>
    </tbody>
  </table>
</template>
<script setup>
import {useStore} from "vuex";
import {computed, reactive, ref} from "vue";

const store = useStore();
const count = ref(computed(function () {
  return store.state.count;
}));
const slogan = ref(computed(function () {
  return store.state.slogan;
}));
const increment = () => {
  store.commit('increment');
};
const addNum = () => {
  store.commit('addNum', 5);
};
const addCount = () => {
  // store.commit('addCount', {
  //   amount: 5
  // });
  // 对象风格的提交方式
  store.commit({
    type: 'addCount',
    amount: 10
  });
};
const persons = reactive(computed(function () {
  return store.getters.persons;
}));
const changeGender = (gender) => {
  store.commit({
    type: 'changeGender',
    gender: gender
  })
};
// 分发 Action
store.dispatch('getProvinces')
</script>
<script>
export default {
  name: "LhzA",
}
</script>

<style scoped>

</style>